<script src="../../main.js"></script>
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-people"></i> 新闻管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-lx-roundadd"
                        class="handle-del mr10"
                        @click="addItem"
                        v-if="globalPermission.news.edit"
                >新增
                </el-button>
                <el-input v-model="query.title" placeholder="标题" class="handle-input mr10"></el-input>
                 <el-select v-model="query.columnId" placeholder="栏目" class="handle-input mr10">
                    <el-option
                            v-for="item in columnsObject"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key">
                    </el-option>
                </el-select>
                <el-select v-model="query.artStatus" placeholder="状态" class="handle-input mr10">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="query.artType" placeholder="类型" class="handle-input mr10">
                    <el-option
                            v-for="item in articleType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <template>
                    <el-date-picker
                            v-model="timeValue"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions"
                            class="mr10">
                    </el-date-picker>
                </template>
                <el-button type="primary" icon="el-icon-search"  @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="title" show-overflow-tooltip label="标题" align="center"></el-table-column>
                <el-table-column prop="topicName" label="话题" align="center"></el-table-column>
                <el-table-column prop="columnName"  width="80" label="栏目" align="center"></el-table-column>
                <el-table-column prop="artStatus"  width="80" label="审核状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.artStatus==0" type="info">待审批</el-tag>
                        <el-tag v-if="scope.row.artStatus==1" type="warning">通过</el-tag>
                        <el-tag v-if="scope.row.artStatus==2" type="danger">不通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="deleted"  width="80" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.deleted==0" type="info">上架</el-tag>
                        <el-tag v-if="scope.row.deleted==1" type="warning" >下架</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="artType" width="80" label="类型" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.artType==1" >视频</el-tag>
                        <el-tag v-if="scope.row.artType==2" >图集</el-tag>
                        <el-tag v-if="scope.row.artType==3" >图文</el-tag>
                        <el-tag v-if="scope.row.artType==4" >影片</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName"  width="100" label="发帖人" align="center"></el-table-column>
                <el-table-column prop="pariseCount"  width="80" label="点赞数" align="center"></el-table-column>
                <el-table-column prop="collectionCount"  width="80" label="收藏数" align="center"></el-table-column>
                <el-table-column prop="dislikeCount"  width="80" label="被踩数" align="center"></el-table-column>
                <el-table-column prop="pay"  width="80" label="观看金币" align="center"></el-table-column>
                <el-table-column prop="createdTime" label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleStatus(scope.row.id,scope.row.artStatus)"
                                v-if="globalPermission.news.approve && (scope.row.artStatus==2 || scope.row.artStatus==0)"
                        >审批
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpOrDown(scope.row.id,1)"
                                v-if="globalPermission.news.approve && scope.row.artStatus==1 && scope.row.deleted==0"
                        >下架
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpOrDown(scope.row.id,0)"
                                v-if="globalPermission.news.approve && scope.row.artStatus==1 && scope.row.deleted==1"
                        >上架
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.row.id)"
                                v-if="globalPermission.news.edit"
                        >查看编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>


        <!-- 审核弹出框 -->
        <el-dialog title="审核" :visible.sync="statusVisible" width="30%">
            <el-form ref="form" :model="statusForm" label-width="70px">
                <el-form-item label="状态">
                    <el-radio-group v-model="statusForm.status">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clean">取 消</el-button>
                <el-button type="primary" @click="saveStatus">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="查看/编辑" :visible.sync="editVisible" width="40%">
            <el-form ref="form" :model="form" label-width="120px">
                 <el-form-item label="官方账号"  v-if="!isCurEdit">
                    <el-select v-model="form.createUid" placeholder="官方账号"  class="handle-input mr10" >
                        <el-option
                                v-for="item in guanfangObject"
                                :key="item.key"
                                :label="item.label"
                                :value="item.key">
                        </el-option>
                    </el-select>
                 </el-form-item>
                 <el-form-item label="基础属性">
                    <el-select v-model="form.columnId" placeholder="所属栏目"  class="handle-input mr10" >
                        <el-option
                                v-for="item in columnsObject"
                                :key="item.key"
                                :label="item.label"
                                :value="item.key">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.topicId" placeholder="所属话题"  class="handle-input mr10" >
                        <el-option
                                v-for="item in topicObject"
                                :key="item.key"
                                :label="item.label"
                                :value="item.key">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.likeId" placeholder="所属喜好" class="handle-input mr10">
                        <el-option
                                v-for="item in likeObject"
                                :key="item.key"
                                :label="item.label"
                                :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="VIP资源">
                    <el-radio-group v-model="form.vip">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="金币数" >
                    <el-input-number
                          v-model="form.pay"
                          controls-position="right"
                          :min="0"
                          :max="1000"
                          @input.native="onInput0_1000"
                        ></el-input-number>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="form.artType">
                        <el-radio :label="1">视频</el-radio>
                        <el-radio :label="2">图集</el-radio>
                        <el-radio :label="3">图文</el-radio>
                        <el-radio :label="4">影片</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="标签">
                    <template>
                        <el-checkbox-group v-model="selectCheck" placeholder="标签名称" >
                            <el-checkbox v-for="item in tagObject"
                                :key="item.id"
                                v-bind="{'checked': item.select? true : false}"
                                :label="item.id">{{item.tagName}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
                <el-form-item label="标题" >
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="正文">
                     <el-input type="textarea" class="el-textarea_inner" rows="6" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="视频地址" v-if="form.artType=='1' || form.artType=='4' ">
                    <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
                    <el-upload
                            ref="uploadPicture"
                            class="upload-demo"
                            action="http://47.97.3.27:8098/manager/topic/uploadVideo"
                            :headers="getToken"
                            :before-upload="beforeUpload"
                            :data="uploadData"
                            v-if="form.artType=='1' || form.artType=='4'"
                            :on-success="handleAvatarSuccess"
                            multiple
                    >
                        <el-button size="medium" type="primary" >上传视频1</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="视频封面" v-if="form.artType=='1' || form.artType=='4' ">
                        <span  class="el-upload_tip" style="color:red;font-size:12px">点击下面图片即可观看大图</span>
                        <el-image
                                class="el-cover"
                                :src="form.videoCover"
                                :preview-src-list="videoCovers"
                        ></el-image>
                        <el-upload
                               ref="uploadPicture"
                               class="el-upload"
                               action="http://47.97.3.27:8098/manager/topic/uploadImg"
                               :headers="getToken"
                               :on-success="refreshPicCover"
                               multiple
                        >
                            <el-button size="medium" type="primary" v-if="globalPermission.news.edit">上传封面</el-button>
                        </el-upload>
                </el-form-item>
                <el-form-item label="图集" v-if="form.artType=='2' || form.artType=='3'">
                        <el-table
                                :data="coverUrls"
                                border
                                class="table"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                        >
                            <el-table-column prop="imageName" label="图片(点击预览大图)" align="center">
                                <template slot-scope="scope">
                                    <el-image
                                            class="table-td-thumb"
                                            :src="coverUrls[scope.$index]"
                                            :preview-src-list="coverUrls"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120" align="center">
                                <template slot-scope="scope">
                                    <el-button
                                            type="text"
                                            icon="el-icon-delete"
                                            class="red"
                                            @click="picDelete(scope.$index)"
                                            v-if="globalPermission.news.edit"
                                    >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-upload
                               ref="uploadPicture"
                               class="el-upload"
                               action="http://47.97.3.27:8098/manager/topic/uploadImg"
                               :headers="getToken"
                               :on-success="refreshPicCoverUrls"
                               multiple
                        >
                            <el-button size="medium" type="primary" v-if="globalPermission.news.edit">上传图集</el-button>
                        </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clean">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getAllNews, delNews, saveNews, editNews, getDetail, delNewsPic, getAllTabs,saveStatus} from '../../api/news';
    import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
    import 'quill/dist/size-set.css';
    import {quillRedefine} from 'vue-quill-editor-upload'
    import { quillEditor,Quill } from 'vue-quill-editor';
    import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
    Quill.register('modules/ImageExtend', ImageExtend);
    let fontSizeStyle = Quill.import('attributors/style/size');
    Quill.register(fontSizeStyle, true);
    //引入video样式
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    //引入hls.js
    var queryColumnsRequest = {url: "/manager/columns/getAll"};
    var queryGFUserRequest = {url: "/manager/customer/getGFUsers"};
    var querylikeRequest = {url: "/manager/like/getAll"};
    var queryTopicRequest = {url: "/manager/topic/getTopicList"};
    var queryTagRequest = {url: "/manager/tag/getTagList"};
    var queryRequest = {url: "/manager/article/getAll"};
    var addRequest = {url: "/manager/article/addArticle"};
    var updateRequest = {url: "/manager/article/updateOrSave"};
    var delRequest = {url: "/manager/article/delArticleById"};
    var getDetailRequest = {url:"/manager/article/getInfo"};
    var delPicRequest = {url:"/manager/article/delCover"};
    var approveRequest = {url:"/manager/article/approve"};
    var upDownRequest = {url:"/manager/article/downOrUp"};
    export default {
        name: 'usertable',
        data() {
            return {
                query: {
                    artStatus: '',
                    titleDesc: '',
                    colId:'',
                    pcfirst:'',
                    pageNum: 1,
                    pageSize: 10,
                    startTime:'',
                    endTime:''
                },
                delQuery:{
                    articleId:'',
                    index:''
                },
                statusQuery:{
                    articleId:'',
                    status:-1
                },
                globalPermission: this.getPermission(),
                getToken:{'auth-token':localStorage.getItem('token')},
                uploadData:null,
                picData :[],
                coverUrls :[],
                videoCovers :[],
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                editRolesVisible: false,
                statusVisible:false,
                formIdShow: false,
                isCurEdit: false,
                pageTotal: 0,
                videoUrl:'',
                form: {},
                statusForm:{},
                idx: -1,
                id: -1,
                status:0,
                statusOptions: [{
                    value: 0,
                    label: '待审批'
                }, {
                    value: 1,
                    label: '审批通过'
                }, {
                    value: 2,
                    label: '审批拒绝'
                }],
                articleType: [{
                    value: 1,
                    label: '视频帖子'
                }, {
                    value: 2,
                    label: '图集帖子'
                }, {
                    value: 3,
                    label: '图文帖子'
                }, {
                    value: 4,
                    label: '影片'
                }],
                columnsObject: this.getColOptions(),
                guanfangObject: this.getGFOptions(),
                topicObject: this.getTopicOptions(),
                tagObject: [],
                selectCheck: [],
                likeObject: this.getlikeOptions(),
                editor: null,   // 富文本编辑器对象
                content: "", // 富文本编辑器默认内容
                editorOption3: {
                    modules: {
                        toolbar: {
                            container: [
                                [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
                                [{ list: "ordered" }, { list: "bullet" }], //列表
                                [{ indent: "-1" }, { indent: "+1" }], // 缩进
                                [{ direction: "rtl" }], // 文本方向
                                [{ size:[false,'10px','12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px']}],
                                [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
                                [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
                                [{ align: [] }], //对齐方式
                            ],
                            handlers: {
                                'image': function () {
                                    QuillWatch.emit(this.quill.id)
                                }
                            }
                        }
                    }
                },
                playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    controls: true, //控制条
                    preload: 'auto', //视频预加载
                    muted: false, //默认情况下将会消除任何音频。
                    loop: false, //导致视频一结束就重新开始。
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: 'video/mp4',
                        src: ''//你所放置的视频的地址，最好是放在服务器上
                    }],
                    //poster: "http://39.106.117.192:8080/static/indexImg.png", //你的封面地址（覆盖在视频上面的图片）
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                timeValue:'',
            };
        },
        components:{
            quillEditor,quillRedefine
        },
        created() {
            queryRequest.data = this.query;
            this.getData();
        },
        methods: {
            // 获取数据
            getData() {
                //获取新闻列表
                getAllNews(queryRequest).then(res => {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                });
            },
            getGFOptions(){
                const data = [];
                getAllTabs(queryGFUserRequest).then(res =>{
                    if(res.data!=null){
                      res.data.forEach(function (tabs) {
                            data.push({
                                label: tabs.nickName,
                                key: tabs.id
                            });
                        });
                    }
                });
                return data;
            },
            getColOptions(){
                const data = [];
                getAllTabs(queryColumnsRequest).then(res =>{
                    if(res.data.list!=null){
                      res.data.list.forEach(function (tabs) {
                            data.push({
                                label: tabs.columnName,
                                key: tabs.id
                            });
                        });
                    }
                });
                return data;
            },
            getlikeOptions(){
                const data = [];
                querylikeRequest.data ={
                    pageNum: 1,
                    pageSize: 100
                };
                getAllTabs(querylikeRequest).then(res =>{
                    if(res.data.list!=null){
                      res.data.list.forEach(function (tabs) {
                            data.push({
                                label: tabs.likeName,
                                key: tabs.id
                            });
                        });
                    }
                });
                return data;
            },
            onInput0_1000(e) {
                  this.$message.closeAll();
                  // 验证是否是纯数字
                  let isNumber = /^\d*$/.test(e.target.value);
                  // 过滤非数字
                  e.target.value = e.target.value.replace(/\D/g, "");
                  if (!isNumber || e.target.value < 0 || e.target.value > 1000) {
                    this.$message.warning("只能输入[0,1000]区间的整数");
                  }
                  e.target.value = (e.target.value >= 0 && e.target.value <= 1000 && e.target.value.match(/^\d*/g)[0]) || null;
                },
            getTagOptions(){
                const data = [];
                queryTagRequest.data ={
                    pageNum: 1,
                    pageSize: 100
                };
                getAllTabs(queryTagRequest).then(res =>{
                    if(res.data.list!=null){
                      res.data.list.forEach(function (tabs) {
                            data.push({
                                tagName: tabs.tagName,
                                isSelect: tabs.select,
                                id: tabs.id
                            });
                       });
                    }
                });
                return data;
            },
            getArticleTagOptions(id){
                const data = [];
                getAllTabs(queryTagRequest).then(res =>{
                    if(res.data.list!=null){
                      res.data.list.forEach(function (tabs) {
                            data.push({
                                label: tabs.tagName,
                                isSelect: false,
                                key: tabs.id
                            });
                       });
                    }
                });
                return data;
            },
            getTopicOptions(){
                const data = [];
                queryTopicRequest.data ={
                    pageNum: 1,
                    pageSize: 100
                };
                getAllTabs(queryTopicRequest).then(res =>{
                    if(res.data.list!=null){
                      res.data.list.forEach(function (tabs) {
                            data.push({
                                label: tabs.topicName,
                                key: tabs.id
                            });
                        });
                    }
                });
                return data;
            },
            clean(){
                this.editVisible=false;
                this.statusVisible=false;
                this.handleSearch();
            },
            handleAvatarSuccess(res, file) {
                this.playerOptions.sources[0].src=res.data;
            },
            //审核
            handleStatus(id,status){
                this.id= id;
                this.status=status;
                this.statusVisible=true;
            },
            saveStatus(){
                this.statusQuery.articleId=this.id;
                this.statusQuery.status=this.statusForm.status;
                approveRequest.data = this.statusQuery;
                saveStatus(approveRequest).then(res=>{
                    if (res.code === 0) {
                        this.$message.success(`审核成功`);
                        this.handleSearch();
                    } else {
                        this.$message.error(res.message);
                    }
                    this.statusForm={};
                    this.statusVisible=false;
                })
            },

            //上下架
            handleUpOrDown(id,deleted){
                var msg = "确定要下架吗";
                if(deleted===0){
                     msg = "确定要上架吗";
                }
                this.$confirm(msg, '提示', {
                    type: 'warning'
                }).then(() => {
                    this.statusQuery.articleId=id;
                    this.statusQuery.status=deleted;
                    upDownRequest.data = this.statusQuery;
                    saveStatus(upDownRequest).then(res=>{
                        if (res.code === 0) {
                            this.$message.success(`上下架成功`);
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                        this.statusForm={};
                        this.statusVisible=false;
                    })
                }).catch(() => {
                });
            },
            getPermission() {
                return JSON.parse(sessionStorage.getItem("permission"));
            },
            beforeUpload (file) {
                this.uploadData = {articleId:this.id};
                let promise = new Promise((resolve) => {
                    this.$nextTick(function () {
                        resolve(true);
                    });
                });
                return promise; //通过返回一个promis对象解决
            },
            refreshPicCover(response){
                this.$message.success('图片上传成功');
                this.form.videoCover = response.data;
                this.videoCovers = response.data.split(',');
            },
            refreshPicCoverUrls(response){
                this.$message.success('图片上传成功');
                this.coverUrl = response.data;
                this.coverUrls.push(response.data);
            },
            // 删除图片
            picDelete(index) {
                // 二次确认删除
                this.$confirm('确认删除此图片？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.coverUrls.splice(index, 1);
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.query.startTime=this.timeValue[0];
                this.query.endTime=this.timeValue[1];
                this.$set(this.query, 'pageNum', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(id, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    delRequest.id = id;
                    delNews(delRequest).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`删除成功`);
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                    //this.tableData.splice(index, 1);
                }).catch(() => {
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 新增
            addItem() {
                this.form={};
                this.selectCheck = [];
                this.coverUrls = [];
                this.tagObject = this.getTagOptions();
                this.editVisible = true;
                this.isCurEdit = false;
            },
            // 编辑操作
            handleEdit(id) {
                this.selectCheck = [];
                this.tagObject =[];
                this.id = id;
                getDetailRequest.id =id;
                getDetail(getDetailRequest).then(res=>{
                   this.form = res.data;
                   if (res.data.artType==1 || res.data.artType==4){
                       //视频帖
                       this.playerOptions.sources[0].src=res.data.videoUrl;
                       this.form.videoCover = res.data.coverUrl;
                       this.videoCovers = res.data.coverUrl.split(',');
                   }
                   if (res.data.artType==3){
                      this.coverUrls = res.data.imgsUrl.split(',');
                   }
                   this.tagObject = res.data.selectCheck;
                });
                this.editVisible = true;
                this.isCurEdit = true;
            },
            // 保存编辑
            saveEdit() {
                if(this.form.artType==null){
                   this.$message.success(`请选择类型`);
                   return;
                }
                if(this.form.createUid==null && this.form.id==null){
                   this.$message.success(`请选择官方账号`);
                   return;
                }
                if(this.form.title==null || this.form.content==null){
                   this.$message.success(`请输入标题或正文`);
                   return;
                }
                if(this.form.columnId==null || this.form.topicId==null){
                   this.$message.success(`请选择栏目或话题`);
                   return;
                }
                this.form.imgsUrlList = this.coverUrls;
                this.form.selectTags = this.selectCheck;
                this.form.videoUrl = this.playerOptions.sources[0].src;
                if((this.form.artType==1 || this.form.artType==4) &&
                    (this.form.videoCover==null || this.form.videoUrl==null)){
                    this.$message.success(`请上传视频或者封面`);
                     return;
                }
                if(this.form.artType==3 && this.form.imgsUrlList==null){
                    this.$message.success(`请上传图片`);
                     return;
                }
                updateRequest.data = this.form;
                editNews(updateRequest).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`成功`);
                        this.editVisible = false;
                        this.handleSearch();
                    } else {
                        this.$message.error(res.message);
                        this.handleSearch();
                    }
                });

            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 130px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .checkbox-rows {
        width: 130px;
        margin-top: 10px;
    }

    .upload-demo{
        background-color: #fff;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 40px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

 .el-upload{
        background-color: #fff;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 40px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-cover{
        display: block;
        margin: auto;
        width: 200px;
        height: 150px;
    }
    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
        margin-left: 0px;
    }

    .el-textarea_inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 150px;
        font-size: inherit;
        color: #606266;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
</style>
